﻿@page "/kanban/stacked-header"
@inherits SampleBaseComponent;

@using ej2_blazor_kanban_data_models
@using Syncfusion.Blazor.Kanban

<SampleDescription>
    <p>This sample demonstrates the Kanban component with the stacked header feature. In this sample, the Kanban is showcased with two headers aligned in a stacked manner.</p>
</SampleDescription>
<ActionDescription>
    <p>The Kanban provides an option to add an additional header along with a column header in stacked manner. This header groups the logically related columns. This can be achieved by mapping <code>Text</code> and <code>KeyField</code> attribute of the <code>KanbanStackedHeader</code> property. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <SfKanban KeyField="Status" DataSource="@cardData" EnableTooltip="true">
        <KanbanColumns>
            @foreach (ColumnModel item in columnData)
            {
                <KanbanColumn HeaderText="@item.HeaderText" KeyField="@item.KeyField"></KanbanColumn>
            }
        </KanbanColumns>
        <KanbanCardSettings ContentField="Summary" HeaderField="Id"></KanbanCardSettings>
        <KanbanStackedHeaders>
            @foreach (StackedHeaderModel item in stackedHeaderData)
            {
                <KanbanStackedHeader Text="@item.Text" KeyFields="@item.KeyFields"></KanbanStackedHeader>
            }
        </KanbanStackedHeaders>
    </SfKanban>
</div>

@code{
    private List<KanbanDataModel> cardData = new KanbanDataModel().GetTasks();
    private List<ColumnModel> columnData = new List<ColumnModel>() {
        new ColumnModel(){ HeaderText= "Open", KeyField= new List<string>() { "Open" } },
        new ColumnModel(){ HeaderText= "In Progress", KeyField= new List<string>() { "InProgress" } },
        new ColumnModel(){ HeaderText= "In Review", KeyField= new List<string>() { "Review" } },
        new ColumnModel() { HeaderText = "Completed", KeyField = new List<string>() { "Close" } }
    };
    private List<StackedHeaderModel> stackedHeaderData = new List<StackedHeaderModel>() {
        new StackedHeaderModel(){ Text= "To Do", KeyFields= new List<string>() { "Open" } },
        new StackedHeaderModel(){ Text= "Development Phase", KeyFields= new List<string>() { "InProgress", "Review" } },
        new StackedHeaderModel(){ Text= "Done", KeyFields= new List<string>() { "Close" } }
    };
}